<template>
  <view class="container">
    <view class="header">
      <view class="head">可提现金额</view>
      <view class="bottom">
        <view class="haveMoney">1046.00</view>
        <view class="record">提现记录</view>
      </view>
    </view>
    <view class="withdrawWay">
      <view class="title">提现方式</view>
    </view>
    <view class="withdraw">
      <view class="title">提现金额</view>
      <view class="money">
        <view class="icon">￥</view>
        <input class="out" type="text">
        <view class="all">全部</view>
      </view>
    </view>
    <view class="submit">提现</view>
    <view class="notice">
      <view class="title">注意事项</view>
      <view class="contant">
        <view>1、由于网络原因，提现申请会出现延时处理现象，请在24小时内 注意查收; </view>
        <view>2、请及时关注，查询是否提现成功; </view>
        <view>3、请及时关注提现金额是否到账，如有问题请联系客服。</view>
      </view>
    </view>
  </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
	background: $body-bc;
	color: $content-color;
  padding-top: 30rpx;
  .header {
    margin: 0 39rpx 90rpx 57rpx;
    .head {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 26rpx;
      color: #3A75C0;
      line-height: 50rpx;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .haveMoney {
      font-family: Source Han Sans CN;
      font-weight: 700;
      font-size: 56rpx;
      color: #FFA73F;
      line-height: 72rpx;
    }
    .record {
      background: rgba(0,193,255,0);
      border-radius: 21rpx;
      border: 1px solid #00C1FF;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24rpx;
      color: #00C1FF;
      line-height: 45rpx;
      padding: 0 22rpx;
    }
  }
  .withdrawWay {
    background: #112959;
    box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0,14,41,0.3);
    border-radius: 15rpx;
    margin: 0 28rpx 22rpx;
    padding: 37rpx 32rpx 40rpx;
    .title {
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 30rpx;
      color: #3A75C0;
    }
  }
  .withdraw {
    background: #112959;
    border-radius: 20rpx;
    margin: 0 28rpx 60rpx;
    padding-bottom: 52rpx;
    .title {
      padding: 34rpx 0 50rpx 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28rpx;
      color: #3A75C0;
    }
    .money {
      margin: 0 97rpx;
      display: flex;
      padding-bottom: 29rpx;
      border-bottom: 1px solid #2D4E8E;
    }
    .icon {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 36rpx;
      color: #00C1FF;
    }
    .out {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 56rpx;
      color: #00C1FF;
      text-align: center;
    }
    .all {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 26rpx;
      color: #3164A9;
      white-space: nowrap;
    }
  }
  .submit {
    margin: 0 94rpx 110rpx;
    background: url('/static/business/order.png') center center no-repeat;
    background-size: 100%;
    padding: 38rpx 0;
    display: flex;
    justify-content: center;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: 400;
    font-size: 30rpx;
    color: #00C1FF;
  }
  .notice {
    margin: 0 42rpx 78rpx 28rpx;
    .title {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #00C1FF;
      margin-bottom: 40rpx;
    }
    .contant {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24rpx;
      color: #3164A9;
      line-height: 48rpx;
    }
  }
}
</style>
